<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册</title>
		<link rel="stylesheet" type="text/css" href="../css/vue.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<link rel="stylesheet" type="text/css" href="../css/loginAndRegister.css"/>
	</head>
	<body class="login register">
		<!--登录模块头部 start-->
		<div class="loginHead">
			<div class="loginHeadContent">
				<div class="fl">
					<a href="javascript:void(0);"><img src="../img/indexLogoWhite.png" class="indexLogo"/></a>
				</div>
				<div class="fr">
					<div class="aGroup">
						<a class="loginMenu" href="javascript:void(0);">项目圈</a>
						<a class="loginMenu" href="javascript:void(0);">材料数据库</a>
						<a class="loginMenu" href="javascript:void(0);">计算工具</a>
						<div class="clear"></div>
					</div>
					<div class="btnGroup">
						<a class="btn" href="javascript:void(0);">注册</a>
						<a class="btn" href="javascript:void(0);">登录</a>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<!--登录模块尾部 end-->
		
		<div class="loginContent">
			<div class="registerTypeForm">
				<div class="menuTypeBox">
					<div class="menuType" :class="{'active':personal}" @click="personalShow">个人用户</div>
					<div class="menuType" :class="{'active':company}" @click="companyShow">企业用户</div>
					<div class="clear"></div>
				</div>
				<div class="registerTypeFormContent">
					<div class="wid100" :class="{'hidden':company}">
						<div class="inputGroup">
							<input type="text" class="personalUser" placeholder="手机号 / 邮箱"/>
							<div class="tips"></div>
						</div>
						<div class="inputGroup">
							<input type="text" class="codeNum" placeholder="验证码"  @blur="removeDisable"/>
							<button class="sentCode" @click="downCount" ref="sentCode">获取验证码</button>
							<div class="clear"></div>
						</div>
						<div class="inputGroup">
							<input type="text" class="personalPw" placeholder="密码（6-16位，区分大小写）"/>
							<div class="tips"></div>
						</div>
						<div class="inputGroup">
							<div class="fl">
								<el-checkbox></el-checkbox>
								<span class="complyWith">我同意并遵守<a href="javascript:void(0);">《平台服务协议》</a></span>
							</div>
							<div class="clear"></div>
						</div>
						<button class="registerBtn" @click="personalVerification">注册</button>
						<div class="hasUser">
							已有账号，<a href="javascript:void(0);">直接登录</a>
						</div>
					</div>
					<div class="wid100" :class="{'hidden':personal}">
						<div class="inputGroup">
							<input type="text" class="companyUser" placeholder="请输入企业邮箱"/>
							<div class="tips"></div>
						</div>
						<div class="inputGroup">
							<input type="text" class="companyPw" placeholder="密码（6-16位，区分大小写）"/>
							<div class="tips"></div>
						</div>
						<div class="inputGroup">
							<div class="fl">
								<el-checkbox></el-checkbox>
								<span class="complyWith">我同意并遵守<a href="javascript:void(0);">《平台服务协议》</a></span>
							</div>
							<div class="clear"></div>
						</div>
						<button class="registerBtn" @click="companyVerification">注册</button>
						<div class="hasUser">
							已有账号，<a href="javascript:void(0);">直接登录</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	
		<!--尾部 start-->
		<div class="footer">Copyright © 2008 - 2017 深圳市建筑科学研究院 All Rights Reserved</div>
		<!--尾部 end-->
	</body>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/vueComponent.js"></script>
	<script type="text/javascript" src="../js/component.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			//获取content最小高度
			var loginContentMinHeight = $(window).innerHeight() - 80;
			$('.loginContent').css('min-height',loginContentMinHeight + 'px');
			
			//获取body高度
			var bodyMinHeight = $('.loginContent').height() + 80;
			$('body').css('min-height',bodyMinHeight + 'px');
		});
		
		var login = new Vue({
			el:'.loginContent',
			data:function(){
				return{
					personal:true,
					company:false
				}
			},
			methods:{
				personalShow:function(){
					this.personal = true;
					this.company = false;
				},
				companyShow:function(){
					this.personal = false;
					this.company = true;
				},
				downCount:function(){
					var i = 10;
					document.querySelector('.sentCode').innerHTML = i + "s";
					var startDownCount = setInterval(function(){
						i = --i;
						if(i > 0){
							document.querySelector('.sentCode').innerHTML = i + "s";
							document.querySelector('.sentCode').setAttribute('disabled','disabled');
							console.log(i);
						}else if(i == 0){
							clearInterval(startDownCount);
							document.querySelector('.sentCode').innerHTML = "再次发送";
							document.querySelector('.sentCode').removeAttribute('disabled','disabled');
						}
					},1000);
				},
				removeDisable:function(){
					var codeNum = document.querySelector('.codeNum');
					var nextStep = document.querySelector('.nextStep');
					if(codeNum.value.length > 4){
						nextStep.classList.remove('disabled');
						nextStep.removeAttribute('disabled');
					}
				},
				personalVerification:function(){
					var personalUserVal = document.querySelector('.personalUser').value;
					var personalPwVal = document.querySelector('.personalPw').value;
					if(personalUserVal.match(/^1\d{10}$/) || personalUserVal.match(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/)){
						document.querySelector('.personalUser').nextElementSibling.innerHTML = "";
					}else{
						document.querySelector('.personalUser').nextElementSibling.innerHTML = "请输入正确的手机号码或者邮箱";
					}
					if(!personalPwVal.match(/^[_0-9a-zA-Z]{6,16}$/)){
						document.querySelector('.personalPw').nextElementSibling.innerHTML = '请输入6-16位的新密码，并区分大小写';
					}else{
						document.querySelector('.personalPw').nextElementSibling.innerHTML = "";
					}
				},
				companyVerification:function(){
					var companyUserVal = document.querySelector('.companyUser').value;
					var companyPwVal = document.querySelector('.companyPw').value;
					if(companyUserVal.match(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/)){
						document.querySelector('.companyUser').nextElementSibling.innerHTML = "";
					}else{
						document.querySelector('.companyUser').nextElementSibling.innerHTML = "请输入正确的手机号码或者邮箱";
					}
					if(!companyPwVal.match(/^[_0-9a-zA-Z]{6,16}$/)){
						document.querySelector('.companyPw').nextElementSibling.innerHTML = '请输入6-16位的新密码，并区分大小写';
					}else{
						document.querySelector('.companyPw').nextElementSibling.innerHTML = "";
					}
				}
			}
		});
	</script>
</html>
